<!DOCTYPE html>
<html>

<head lang="en">
    <title>找攻略</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link href="/css/comment/style.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/strategyComment.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/A-emoji.css">
    <script src="/js/plugins/A-emoji.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="/css/strategyCatalogs.css">
    <script src="/js/common.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>
    <style>
        .on{color:#f00;}
    </style>

</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
            <span>点评详情</span>
        </div>
        <div class="col"></div>
    </div>
</div>

<div class="comment">
    <div class="container ">
        <div class="row">
            <div class="col-2 comment-head">
                <a data-href="/userProfiles.html?id=" render-fun="setProfile" render-key="user.id">
                    <img class="rounded-circle"  render-src="user.headImgUrl">
                </a>
                <button class="btn" id="followBtn"><i class="fa fa-hand-o-right"> </i> 关注</button>
            </div>

            <div class="col">
                <span class="comment-star starNum" >
                   <!-- <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star-o"></i>
                    <i class="fa fa-star-o"></i>-->
                </span>

                <span class="comment-date" render-html="createTime"></span>
                <div class="comment-content">
                    <p render-html="content"></p>
                </div>
                <ul class="comment-img" render-loop="imgArray" >
                    <li>
                        <img  render-src="imgArray.self">
                    </li>
                </ul>

                <div class="comment-link">
                    <a data-href="/strategyCatalogs.html?id=" render-fun="setCatalog" render-key="strategy.id">
                        <img  render-src="strategy.coverUrl"> <span render-html="strategy.title"></span>
                        <i class="fa fa-angle-right fa-2x"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="count d-flex justify-content-between">
        <div class="p-2">评论<span id="totalComments" ></span></div>
        <div class="p-2">赞<span id="likeCount"></span></div>
    </div>
</div>



<div>
    <form action="/strategyComments/sunComments" method="post" class="tjpl-form" id="submitForm">
        <textarea name="content"></textarea>
        <input type="hidden" name="strategyComment.id">
        <div class="tjpl">
            <input type="text" id="submitComment" value="提交评论" />
        </div>
    </form>

    <div class="replyment">
        <div render-loop="list">
            <div class="commentBox">
                <div class="li">
                    <div class="icon" style="width: 50px">
                        <a href="/userProfiles.html?id=" render-fun="setHref" render-key="list.user.id">
                            <img render-src="list.user.headImgUrl">
                        </a>
                    </div>
                    <div class="content">
                        <!--当前评论的id-->
                        <div class="name" render-html="list.user.nickName" id="nickName"></div>
                        <div class="time" render-html="list.createTime"></div>
                        <div class="text" render-html="list.content" id="replyContent"></div>

                        <div render-loop="list.replyComments">

                            <div render-attr="data-id=list.id">
                                <a role="button" render-html="list.replyComments.replyUser.nickName"
                                   style="color: #c64355" class="nickName"
                                   render-attr="data-id=list.replyComments.replyUser.id"></a>

                                回复: <a role="button" render-html="list.replyComments.commentUser.nickName"
                                       style="color: #c7df69" class="nickName"
                                       render-attr="data-id=list.replyComments.commentUser.id"></a>---------

                                <span render-html="list.replyComments.content"></span>

                            </div>
                        </div>
                        <div class="d-flex icon" render-attr="data-id=list.id" id="strategySunCommentId">
                            <div>
                                <i class="fa  fa-commenting-o replyBtn" style="margin-right: 5px"
                                   render-attr="data-id=list.user.id"> 回复 </i>
                            </div>

                            <!--<div>
                                <form action="#" method="get" class="tjpl-form">
                                    <textarea></textarea>
                                    <div class="re-tijiao">
                                        <input type="submit" value="提交回复" />
                                    </div>
                                </form>
                            </div>-->
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--

<div class="container d-flex">
    <div class="p-2  flex-fill">
        <button class="fa fa-thumbs-o-up"  id="likeBtn" data-key="on"> </button>
    </div>
</div>
-->

<div class="operation">
    <div class="d-flex justify-content-between">
        <a role="button" id="addBtn">
            <div class="p-2" >
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;
                <i class="fa fa-thumbs-o-up" id="likeBtn" data-key="on"></i>赞赞赞</div>
        </a>

    </div>
</div>
<!--<div class="huifu-s">
    <span class="re-show">[回复]</span>
    <span class="re-hide">[收起回复]</span>
</div>
<div class="reply">
    <form action="#" method="get">
        <textarea></textarea>
        <div class="re-tijiao">
            <input type="submit" value="提交回复" />
        </div>
    </form>
</div>-->


<!--评论模态框-->
<div class="modal fade" id="replyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">评论回复内容</h4>
            </div>
            <div class="modal-body">
                <form action="/strategySunComments/replyComments" method="post" id="replyForm">
                    <div class="form-group">
                        <!--评论的内容-->
                       <!-- <label for="recipient-name" class="control-label">内容:</label>-->
                        <textarea type="text" class="form-control"  name="content"></textarea>
                        <!--评论人的id-->
                        <input type="hidden" name="strategySunComment.id">
                        <input type="hidden" name="commentUser.id">
                        <input type="hidden" name="replyUser.id">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveBtn">评论</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        var params = getParams();
        var user = JSON.parse(sessionStorage.getItem("user"));
        if (user){
            var userId=user.id
        }
        if (!params.id) {
            return;
        }
        //回显某个点评
        $.get("/strategyComments/"+params.id,function (data) {
            console.log(data);
            $(".comment").renderValues(data,{
                setProfile: function(item,value) {
                    var url = $(item).data("href");
                    $(item).attr('href',url+value);
                },
                setCatalog: function(item,value) {
                    var url = $(item).data("href");
                    $(item).attr('href',url+value);
                }
            });
            var starNum=data.starNum;
            var html="";
            for(i=0;i<starNum;i++){
                html+='<i class="fa fa-star"></i> '
            }
            for(i=starNum;i<5;i++){
                html+='<i class="fa fa-star-o"></i> '
            }
            $(".starNum").append(html);
        })


        var currentPage = 1;
        var totalPage=1;
        var list = [];


        //查询方法------------------------------------------------
        function query() {
            $.get("/strategyComments/" + params.id + "/sunComments",{currentPage:currentPage}, function (data) {
                console.log(data);
                $("#totalComments").html(data.total);
                $.merge(list,data.list);
                totalPage = data.pages;
                $(".replyment").renderValues({list:list}, {
                    setHref: function(item,value) {
                        var url = $(item).data("href");
                        $(item).attr('href',url+value);
                    }
                });


                //回复按钮绑定事件
                $(".replyBtn").click(function () {
                    $("#replyForm").clearForm();
                    var strategySunCommentId =$(this).closest("#strategySunCommentId").data("id");
                    var commentUserId = $(this).data("id");
                    $("[name='commentUser.id']").val(commentUserId);
                    $("[name='strategySunComment.id']").val(strategySunCommentId);
                    $("#replyModal").modal("show");
                });


                //昵称绑定点击回复事件
                $(".nickName").click(function () {
                    $("#replyForm").clearForm();
                    var strategySunCommentId =$(this).closest("div").data("id");
                    //console.log(strategySunCommentId);
                    var commentUserId = $(this).data("id");
                    $("[name='commentUser.id']").val(commentUserId);
                    $("[name='strategySunComment.id']").val(strategySunCommentId);
                    //$("#replyForm").attr("action", "/strategySunComments/replyComments")
                    $("#replyModal").modal("show");
                })

            });
            currentPage +=1;

        }

        //jrender渲染对象------------------------------------
        query();

        //滑动分页--------------------------------------------
        $(window).scroll(function () {
            if ($(window).height() + $(window).scrollTop()>= $(document).height()) {
                if (currentPage <= totalPage) {
                    query();
                } else {
                    $(document).dialog({
                        type : 'notice',
                        infoText: '亲.我也是有限度的',
                        autoClose: 2500,
                        position: 'bottom'  // center: 居中; bottom: 底部
                    });
                }
            }
        });

        //提交评论---------------------------------------------
        $("#submitComment").click(function () {
            $("[name='strategyComment.id']").val(params.id);
            $("#submitForm").ajaxSubmit(function (data) {
                if(data.success){
                    $(document).dialog({
                        type: 'alert',
                        closeBtnShow: false,
                        content: '评论成功',
                    })
                    setTimeout(function () {
                        location.reload();
                    }, 500);
                }
            })
        })


        //评论点击事件
        $("#saveBtn").click(function () {
            $("#replyForm").ajaxSubmit(function (data) {
                if (data.success) {
                    $(document).dialog({
                        type: 'alert',
                        closeBtnShow: false,
                        content: '评论成功',
                    })
                    setTimeout(function () {
                        location.reload();
                    }, 500);
                }
            })
        })

        //看看有多少人点了赞
        $.get("/strategyComments/"+params.id+"/likeCount",{userId:userId},function (data) {
            if (data.success){
                $("#likeBtn").attr("data-key","")
                $("#likeBtn").addClass("on");
            }
            $("#likeCount").html(data.obj)

        })
        //点赞事件
        $("#likeBtn").click(function () {
            /*获取到id执行点击事件*/
            if (user){
                if ($(this).attr("data-key")=="on") {
                    $(this).addClass("on");
                    var num = Number($("#likeCount").html()) + 1;

                    $.ajax({
                        type:"post",
                        url:"/strategyComments/like/saveLike",
                        data:{userId:userId,travelId:params.id},
                        success:function(data) {
                            if (data.success) {
                                $(document).dialog({
                                    type: 'notice',
                                    infoText: '点赞成功',
                                    autoClose: 2500,
                                    position: 'bottom'  // center: 居中; bottom: 底部
                                })
                            }
                        }
                    })
                    /*给变量赋值当.btn点击执行b标签内容=+1*/
                    $("#likeCount").html(num);
                    $(this).attr("data-key", "")
                } else {
                    $(this).removeClass("on");
                    num = Number($("#likeCount").html()) - 1;
                    $.ajax({
                        type:"delete",
                        url:"/strategyComments/like/deleteLike",
                        data:{userId:userId,travelId:params.id},
                        success:function(data) {
                            if (data.success) {
                                $(document).dialog({
                                    type : 'notice',
                                    infoText: '取消点赞成功',
                                    autoClose: 2500,
                                    position: 'bottom'  // center: 居中; bottom: 底部
                                })
                            }
                        }
                    })
                    $("#likeCount").html(num);
                    $(this).attr("data-key", "on");
                }
            }
            //没登陆不能点赞
            else {
                alert("请先登陆")
                // window.location.href="login.html"
            }
        })
    })
</script>
</body>

</html>